/**
 * 编辑形象标签
 * page形象标签
 */
import 'package:flutter/material.dart';
import 'package:qgchat/common/global/global.dart';
import 'package:qgchat/http/apis/api.dart';
import 'package:qgchat/http/models/tagModel.dart';

class Tag extends StatefulWidget {
  Tag({
    Key key,
    this.importantTags,
  }) : super(key: key);

  final List<TagModel> importantTags;

  @override
  _TagState createState() => _TagState();
}

class _TagState extends State<Tag> {

  List<TagModel> tagsList; // tag表
  List<TagModel> importantTags = []; // 选中的tag


// life ------------------------------------------------------------------------
  @override
  initState() {
    super.initState();
    getTagList();
  }

// methods ---------------------------------------------------------------------

  // 获取tag表
  void getTagList() async {
    List<TagModel> res = await UserApis.getTag();
    setState(() {
      tagsList = res;
      importantTags = widget.importantTags;
    });
  }

  // 保存签名
  keepTag() {
    Navigator.of(context).pop(importantTags);
  }

// widget ----------------------------------------------------------------------

  // 标签构建函数
  Widget tagRender(bool choice, TagModel tag) {

    void _addTag() {
      if (importantTags.length < 2) {
        setState(() {
          importantTags.add(tag);
        });
      } else {
        showToast('只能选择两个标签');
      }
    }

    void _removetag() {
      setState(() {
        importantTags.removeWhere((item) => item.id == tag.id);
      });
    }

    if (choice) {
      return GestureDetector(
        onTap: () {
          _removetag();
        },
        child: Container(
          height: px(54),
          padding: EdgeInsets.symmetric(horizontal: px(20), vertical: px(9)),
          decoration: BoxDecoration(
            color: col("6f53ff"),
            borderRadius: BorderRadius.circular(px(27)),
          ),
          child: Text(
            tag.tagName,
            style: TextStyle(
              color: Colors.white,
              fontSize: px(26),
            ),
          ),
        ),
      );
    } else {
      return GestureDetector(
        onTap: () {
          _addTag();
        },
        child: Container(
          height: px(54),
          padding: EdgeInsets.symmetric(horizontal: px(20), vertical: px(9)),
          decoration: BoxDecoration(
            color: col("edeff2"),
            borderRadius: BorderRadius.circular(px(27)),
          ),
          child: Text(
            tag.tagName,
            style: TextStyle(
              color: col("606266"),
              fontSize: px(26),
            ),
          ),
        ),
      );
    }
  }

  // 加载标签
  List<Widget> initTags() {
    if (tagsList != null) {
      return tagsList.map((item) {
        return tagRender(false, item);
      }).toList();
    } else {
      return [Center(child: CircularProgressIndicator(),)];
    }
  }

  // 选中标签
  List<Widget> _importantTagsWidget() {
    if (importantTags != null) {
      return importantTags.map((item) {
        return tagRender(true, item);
      }).toList();
    } else {
      return [];
    }

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(px(88)),
        child: AppBar(
          centerTitle: true,
          title: Text(
            "形象标签",
            style: TextStyle(
              color: Colors.black,
              fontSize: px(34),
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
      body: Container(
        width: w100(context),
        color: Colors.white,
        child: ListView(
          padding: EdgeInsets.symmetric(horizontal: px(60)),
          children: <Widget>[
            Container(
              width: w100(context),
              margin: EdgeInsets.only(top: px(30)),
              child: Text(
                "仅能选择2个",
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: col("909399"),
                  fontSize: px(26),
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: px(70)),
              child: Wrap(
                spacing: px(15),
                runSpacing: px(20),
                children: initTags(),
              ),
            ),
//            Container(
//              margin: EdgeInsets.only(top: px(40)),
//              child: Row(
//                mainAxisAlignment: MainAxisAlignment.spaceBetween,
//                crossAxisAlignment: CrossAxisAlignment.start,
//                children: <Widget>[
//                  Container(
//                    width: px(566),
//                    child: TextField(
//                      maxLength: 4,
//                      decoration: InputDecoration(
//                        labelText: "其他印象",
//                        labelStyle: TextStyle(color: col("bfc2cc")),
//                        border: OutlineInputBorder(
//                          borderRadius: BorderRadius.circular(px(6)),
//                          borderSide: BorderSide(
//                            width: 1,
//                            color: col("edeff2"),
//                          ),
//                        ),
//                      ),
//                    ),
//                  ),
//                  Container(
//                    width: px(44),
//                    height: px(44),
//                    margin: EdgeInsets.only(top: px(40)),
//                    decoration: BoxDecoration(
//                      color: col("6f53ff"),
//                      borderRadius: BorderRadius.circular(px(22)),
//                    ),
//                    child: FlatButton(
//                      onPressed: () => {},
//                      padding: EdgeInsets.zero,
//                      shape: RoundedRectangleBorder(
//                        borderRadius: BorderRadius.circular(
//                          sp(22),
//                        ),
//                      ),
//                      child: Image.asset(
//                        "assets/images/icon/jian.png",
//                        width: px(32),
//                      ),
//                    ),
//                  ),
//                ],
//              ),
//            ),
//            Container(
//              margin: EdgeInsets.only(top: px(40)),
//              child: Row(
//                mainAxisAlignment: MainAxisAlignment.spaceBetween,
//                crossAxisAlignment: CrossAxisAlignment.start,
//                children: <Widget>[
//                  Container(
//                    width: px(566),
//                    child: TextField(
//                      maxLength: 4,
//                      decoration: InputDecoration(
//                        labelText: "其他印象",
//                        labelStyle: TextStyle(color: col("bfc2cc")),
//                        border: OutlineInputBorder(
//                          borderRadius: BorderRadius.circular(px(6)),
//                          borderSide: BorderSide(
//                            width: 1,
//                            color: col("edeff2"),
//                          ),
//                        ),
//                      ),
//                    ),
//                  ),
//                  Container(
//                    width: px(44),
//                    height: px(44),
//                    margin: EdgeInsets.only(top: px(40)),
//                    decoration: BoxDecoration(
//                      color: col("6f53ff"),
//                      borderRadius: BorderRadius.circular(px(22)),
//                    ),
//                    child: FlatButton(
//                      onPressed: () => {},
//                      padding: EdgeInsets.zero,
//                      shape: RoundedRectangleBorder(
//                        borderRadius: BorderRadius.circular(
//                          sp(22),
//                        ),
//                      ),
//                      child: Image.asset(
//                        "assets/images/icon/jia.png",
//                        width: px(32),
//                      ),
//                    ),
//                  ),
//                ],
//              ),
//            ),
//            Container(
//              alignment: Alignment.centerRight,
//              margin: EdgeInsets.only(top: px(24)),
//              padding: EdgeInsets.only(right: px(60)),
//              child: Text(
//                "印象标签最多4个字",
//                style: TextStyle(
//                  color: col("909399"),
//                  fontSize: px(22),
//                ),
//              ),
//            ),
            Container(
              margin: EdgeInsets.only(top: px(100)),
              child: Text(
                "已选",
                style: TextStyle(
                  color: col("909399"),
                  fontSize: px(26),
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: px(20)),
              child: Wrap(
                spacing: px(15),
                runSpacing: px(20),
                children: _importantTagsWidget(),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
